<template>
  <div>
    <content-header-wrapper />
    <a-card style="margin: 10px 0 0 0">
      <h2>{{ $route.meta.title }}</h2>
      <a-table
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        :loading="tableLoading"
        :bordered="false"
        @change="onChange"
      >
        <template slot="checkPhoto" slot-scope="text, record">
          <a href="javascript:;" color="#0984e3" @click="queryPhoto(record)"
            >查看</a
          >
        </template>
        <template slot="registerStatus" slot-scope="text, record">
          <a-tag v-if="record.registerStatus == 1" color="#ffeaa7"
            >待处理</a-tag
          >
          <a-tag v-if="record.registerStatus == 2" color="#55efc4">通过</a-tag>
          <a-tag v-if="record.registerStatus == 3" color="#f50">拒绝</a-tag>
        </template>

        <template slot="action" slot-scope="text, record">
          <span v-if="record.registerStatus == 1">
            <a-tag href="javascript:;" color="#00b894" @click="pass(record)"
              >通过</a-tag
            >
            <a-divider type="vertical" />
            <a-tag href="javascript:;" color="#d63031" @click="notpass(record)"
              >拒绝</a-tag
            >
          </span>
          <span v-else><a-tag href="javascript:;">已处理</a-tag></span>
        </template>
      </a-table>
      <a-modal
        :visible="visible"
        :width="700"
        :bodyStyle="{}"
        :footer="null"
        @cancel="cancel"
      >
        <template slot="title">
          <span class="user-details-modal-title"> 查看认证照片 </span>
        </template>

        <div>
          <a-row>
            <a-col span="{12}">
              <img width="100%" :src="photo1" />
            </a-col>
            <a-col span="{12}">
              <img width="100%" :src="photo2" />
            </a-col>
          </a-row>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>
<script>
import { query, approval, queryPhoto } from "../../api/register/register";
import ContentHeaderWrapper from "../../components/ContentHeaderWrapper/ContentHeaderWrapper.vue";
const columns = [
  {
    title: "id",
    dataIndex: "registerId",
    key: "registerId",
    // width: "160px",
    // align: "center",
  },
  {
    title: "用户id",
    dataIndex: "userId",
    key: "userId",
    // width: "170px",
  },
  {
    title: "学校id",
    dataIndex: "schoolId",
    key: "schoolId",
    // scopedSlots: { customRender: 'endTime' },
  },
  {
    title: "学院",
    dataIndex: "colleges",
    key: "colleges",
    // width: "150px",
    // scopedSlots: { customRender: "beginTime" },
  },
  {
    title: "年级",
    dataIndex: "grade",
    key: "grade",
    // scopedSlots: { customRender: 'endTime' },
  },
  {
    title: "查看认证照片",
    key: "checkPhoto",
    width: "150px",
    scopedSlots: { customRender: "checkPhoto" },
  },
  {
    title: "认证状态",
    key: "registerStatus",
    width: "150px",
    scopedSlots: { customRender: "registerStatus" },
  },
  {
    title: "操作",
    key: "action",
    width: "150px",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  components: { ContentHeaderWrapper },
  name: "Register",
  data() {
    return {
      tableLoading: false,
      columns,
      photo1: "",
      photo2: "",
      tableData: [],
      labelCol: 3,
      wrapperCol: 20,
      pagination: {
        current: 1,
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 0,
        showQuickJumper: true,
        showSizeChanger: false,
        pageSizeOptions: ["5", "10", "20", "50"],
        showTotal: (total) => `共 ${total} 条`,
      },

      visible: false,
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.tableLoading = true;
      const requestValue = {
        currPage: this.pagination.current,
        pageSize: this.pagination.defaultPageSize,
      };
      query({})
        .then((res) => {
          const result = res.data.data;
          const pagination = { ...this.pagination };
          pagination.total = result.total;
          this.pagination = pagination;
          this.tableData = result.list;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    queryPhoto(e) {
      queryPhoto(e).then((res) => {
        console.log(res);
        var data = res.data;
        if (data.code == 200) {
          this.photo1 = data.data[0];
          this.photo2 = data.data[1];
          this.visible = true;
        }
      });
    },
    // 切换页码时触发
    onChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getlist();
    },

    pass(e) {
      e.registerStatus = 2;
      approval(e).then((res) => {});
    },
    notpass(e) {
      e.registerStatus = 3;
      approval(e).then((res) => {});
    },
    cancel() {
      this.visible = false;
    },
  },
};
</script>
